<template>
      <div class="line_box" ref="echartDom"></div>
  </template>
  
  <script setup lang="ts">
  import { Bottom } from "@element-plus/icons-vue/dist/types";
import { inject, ref, shallowRef, onMounted, onUnmounted, watch,watchEffect,defineEmits } from "vue";
  
// 接收参数
const props = defineProps({
  housingSupplyStatsData: {
    type: Object,
    default: () => {},
  },
});
// 数据定义
const echartDom = ref<null | HTMLDivElement>(null);
const myChart = shallowRef<null | any>(null);
const echarts = inject<any>("echarts");
const emit = defineEmits(['barPiemagnify'])
// 字体自适应方法
const pxToRem = (px: number) => {
  const scale = document.documentElement.clientWidth / 1920;
  return Math.round(px * Math.min(scale, 3));
};
// echarts初始化渲染
let legendData = props.housingSupplyStatsData.legendData;
let xAxisData = props.housingSupplyStatsData.xAxisData;
let yAxisData = props.housingSupplyStatsData.yAxisData;
let seriesData = props.housingSupplyStatsData.seriesData;
let colors = props.housingSupplyStatsData.colors;
let typeData = props.housingSupplyStatsData.typeData;

const getEchart = () => {
  if (echartDom.value) {
    myChart.value = echarts.init(echartDom.value);
    const option = {

  tooltip: {
    trigger: "item",
    axisPointer: {
      type: "line",
      lineStyle: {
        color: "rgba(40,252,255,0.6)",
        shadowBlur: 10,
        shadowColor: "rgba(0, 0, 0, 0.9)",
      },
    },
    textStyle: {
      color: "#fff",
      fontSize: pxToRem(15),
    },
    backgroundColor: "rgba(8, 64, 132, 0.9)",
    borderColor:'#fff',
  },
  legend: {
    icon:"rect",
    orient: 'horizontal',//horizontal水平显示
    left:pxToRem(0),
    bottom: pxToRem(0),
    itemWidth: pxToRem(15),
    itemHeight: pxToRem(8),
    itemGap: pxToRem(3),
    textStyle: {
      color: "#fff",
      fontSize: pxToRem(10),
      rich: {},
      padding: [0, 0, pxToRem(-3), 0],
    },
},
series: [
  {
    type: 'pie',
    radius: [pxToRem(15), pxToRem(50)],
    center: ['50%', '40%'],
    roseType: 'radius',
    itemStyle: {
      borderRadius: pxToRem(2)
    },
    label: {
        show: true,
        textStyle: {
          fontSize: pxToRem(10), // 标签字体大小
          backgroundColor:'rgba(0,0,0,0)',
          color:'#fff'
        },
      },
    labelLine: {
        show: true,//数据标签引导线
        length: 1,
    },
    data: props.housingSupplyStatsData.seriesData
  }
]
    };
    myChart.value.setOption(option);
    myChart.value.on("click", (params) => {
      emit('barPiemagnify',props.housingSupplyStatsData)
    });
  }
};
const updateChart = () => {
  if (myChart.value) {
    myChart.value.dispose(); // 销毁旧图表实例
  }
  legendData = props.housingSupplyStatsData.legendData;
  xAxisData = props.housingSupplyStatsData.xAxisData;
  yAxisData = props.housingSupplyStatsData.yAxisData;
  seriesData = props.housingSupplyStatsData.seriesData;
  colors = props.housingSupplyStatsData.colors;
  typeData = props.housingSupplyStatsData.typeData;
  getEchart();
};

watchEffect(() => {
  updateChart();
});
onMounted(() => {
  getEchart();
  window.addEventListener("resize", () => {
    if (myChart.value) {
      myChart.value.dispose(); // 销毁旧图表实例
    }
    getEchart(); // 创建新的图表实例
  });
});

onUnmounted(() => {
  window.removeEventListener("resize", () => {
    if (myChart.value) {
      myChart.value.dispose(); // 在组件销毁时也需要销毁图表实例
    }
  });
});
</script>

<style scoped lang="less">
</style>
  